import { useState, useEffect, useRef } from 'react'
export default function Demo(props) {
  const [time, setTime] = useState(new Date().toLocaleTimeString())

  useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(new Date().toLocaleTimeString())
    }, 1000)

    // 组件卸载时清除定时器
    return () => clearInterval(intervalId)
  }, [])
  return (
    <div className="flex flex-wrap">
      <div className="box">
        <span>测试组件,测试传值:{props.title}</span>
        <Card>
          <span>嵌套组件,测试传值:{props.username}</span>
        </Card>
      </div>
      <div className="box">
        <span>条件判断</span>
        <Item></Item>
      </div>
      <div className="box">
        <span>遍历</span>
        <List></List>
      </div>
      <div className="box">
        <span>倒计时</span>
        {time}
        <Time time={time}></Time>
      </div>
      <div className="box">
        <Form></Form>
      </div>
      <div className="box">
        <Accordion></Accordion>
      </div>
      <div className="box">
        <Focus></Focus>
      </div>
    </div>
  )
}
function Accordion() {
  const [activeIndex, setActiveIndex] = useState(0)
  return (
    <>
      <Panel
        title="关于"
        isActive={activeIndex === 0}
        onShow={() => setActiveIndex(0)}
      >
        阿拉木图人口约200万，是哈萨克斯坦最大的城市。在1929年至1997年之间，它是该国首都。
      </Panel>
      <Panel
        title="词源"
        isActive={activeIndex === 1}
        onShow={() => setActiveIndex(1)}
      >
        这个名字源于哈萨克语 <span lang="kk-KZ">алма</span>
        ，是“苹果”的意思，通常被翻译成“满是苹果”。事实上，阿拉木图周围的地区被认为是苹果的祖籍，
        <i lang="la">Malus sieversii</i> 被认为是目前本土苹果的祖先。
      </Panel>
    </>
  )
}
function Panel({ title, children, isActive, onShow }) {
  return (
    <section className="border border-[#333]">
      <h3>{title}</h3>
      {isActive ? (
        <p>{children}</p>
      ) : (
        <button onClick={onShow} className="text-red-300">
          显示
        </button>
      )}
    </section>
  )
}
function Focus() {
  const inputRef = useRef(null)

  function handleClick() {
    inputRef.current.focus()
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>聚焦输入框</button>
    </>
  )
}
function Form() {
  const [firstName, setFirstName] = useState('')
  const [lastName, setLastName] = useState('')

  const fullName = firstName + ' ' + lastName

  function handleFirstNameChange(e) {
    setFirstName(e.target.value)
  }

  function handleLastNameChange(e) {
    setLastName(e.target.value)
  }

  return (
    <>
      <h2>让我们帮你登记</h2>
      <label>
        名： <input value={firstName} onChange={handleFirstNameChange} />
      </label>
      <label>
        姓： <input value={lastName} onChange={handleLastNameChange} />
      </label>
      <p>
        你的票将发给：<b>{fullName}</b>
      </p>
    </>
  )
}
function Time({ time }) {
  return <h1>{time}</h1>
}
function Card({ children }) {
  return <div className="text-red-200">{children}</div>
}

function Item() {
  const [isShow, setIsShow] = useState(false)
  return (
    <div>
      <button
        onClick={() => {
          setIsShow(!isShow)
        }}
      >
        {isShow ? '展示' : '不展示'}
      </button>
      {isShow ? '展示' : '不展示'}
    </div>
  )
}
function List() {
  const list = ['张三', '私立', '王五']
  const li = list.map((item) => <li key={item}>{item}</li>)
  return <ul>{li}</ul>
}
